<template>
    <view class="page">
        <view class="nav-box flex">
            <view :class="{ 'nav-item': true, 'active': status === item.id }" v-for="(item, index) in navArray"
                :key="item.id" @click="handleChange(item.id)">{{ item.title }}</view>
        </view>
        <view class="kong" style="height: 84rpx;"></view>
        <view class="shop-box" v-for="(item, index) in cartData" :key="index" @click="handleDetail(item.id,item.status,item.order_id)">
            <view class="shop-1" @tap="allcheckTap(index)">
                <view class="titile flex">{{ item.type_str }}
                    <view class="order-num">{{ item.order_no }}</view>
                </view>
            </view>
            <view class="shop-con">
                <image :src="showImgApi + item.img" class="shop_img2" />
                <view class="right">
                    <view class="shop-title">{{ item.title }}</view>
                    <view class="flex" style="margin-top: 80rpx;justify-content: space-between;">
                        <view class="price"><span>￥</span>{{ item.people_price }}</view>
                        <view class="bottom">
                            <view class="num">×{{ item.num }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="flex-price flex">商品总金额：<view class="flex-1">{{ item.total_price }}</view> </view>
        </view>
        <view class="kong"></view>
    </view>
</template>
<script>
import {
    orderInfoList
} from '@/utils/request.js'
import { onReachBottom } from 'uview-ui/libs/mixin/mixin';
export default {
    data() {
        return {
            navArray: [{ title: '全部', id: 0 }, { title: '待支付', id: 1 }, { title: '待使用', id: 4 }],
            showImgApi: this.$config.showImgApi,
            page: 1,
            limit: 10,
            total:0,
            status: 0,
            cartData:[],
        };
    },
    onShow() {
        this.cartData=[]
        this.page=1
        this.init()
    },
    onReachBottom(){
        if(this.cartData.length<this.total){
            this.page++
            this.init()
        }
    },
    methods: {
        async orderInfoList(data) {
            return await orderInfoList(data)
        },
        handleDetail(id,status,order_id){
            uni.navigateTo({ url: './detail?id='+id+'&status='+status+'&order_id='+order_id })
        },
        handleChange(id) {
            this.status = id
            this.cartData=[]
            this.page=1
            this.init()
        },
        init() {
            const data = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id, page: this.page, limit: this.limit, status: this.status }
            this.orderInfoList(data).then(res => {
                this.cartData =[...this.cartData,...res.list]
                this.total=res.total
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.shop-box {
    width: 706rpx;
    padding: 22rpx 0 42rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 24rpx auto 0;
}
.flex-price{
    width: 95%;
    margin: 12rpx auto 0;
    justify-content: space-between;
    color: rgb(127,127,127);
    font-size: 25rpx;
    .flex-1{    
        color: rgb(255,184,80);
    }
}
.kong {
    width: 100%;
    height: 100rpx;
}

.shop-1 {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.flex-box {
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
    display: flex;
    align-items: center;
    position: fixed;
    justify-content: space-between;
    bottom: 0rpx;
    right: 0;
    background: #ffffff;

    .flex-1 {
        font-size: 28rpx;
        color: rgb(131, 131, 131);
        margin-left: 32rpx;

        span {
            font-size: 32rpx;
            color: rgb(255, 184, 80);
        }
    }

    .flex-btn {
        width: 262rpx;
        height: 73rpx;
        line-height: 73rpx;
        margin-right: 28rpx;
        font-size: 30rpx;
        color: #ffffff;
        background: rgb(255, 184, 80);
        border-radius: 36rpx;
        text-align: center;
    }
}

.titile {
    width: 95%;
    margin: 0 auto;
    font-size: 26rpx;
    display: flex;
    justify-content: space-between;
    view {
        display: block;
        margin-left: 14rpx;
        font-size: 16rpx;
        color: #d7d7d7;
    }
    .order-num{
        color: rgb(127,127,127);
    }
}

.shop-con {
    width: 95%;
    margin: 26rpx auto 0;
    display: flex;
    align-items: center;
}

.shop_img1 {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
}

.shop_img2 {
    width: 180rpx;
    height: 180rpx;
    border-radius: 16rpx;
}

.right {
    // width: 390rpx;
    flex: 1;
    height: 180rpx;
    margin-left: 20rpx;
    margin-top: 10rpx;
}

.shop-title {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; // 控制显示两行
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; // 允许内容进行换行
}

.kuan {
    width: 120rpx;
    height: 46rpx;
    line-height: 46rpx;
    background: #fafafa;
    border-radius: 10rpx;
    color: #9e9e9e;
    text-align: center;
}

.nav-box {
    padding: 20rpx 0 18rpx;
    background: #FFB850;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    justify-content: space-around;

    .nav-item {
        font-size: 30rpx;
        color: #ffffff;
    }

    .active {
        position: relative;
        &::after {
            position: absolute;
            content: '';
            width: 32rpx;
            height: 1rpx;
            background: #ffffff;
            bottom: -10rpx;
            left: 50%;
            margin-left: -16rpx;
        }
    }
}
</style>